~repos /website

---
import { type CollectionEntry, getCollection } from "astro:content";
import { render } from "astro:content";
import Layout from "@/layouts/BaseLayout.astro";
import FormattedDate from "@/components/FormattedDate.astro";

export async function getStaticPaths() {
  const posts = await getCollection("content");
  return posts.map((post) => ({
    params: { postId: post.id },
    props: post,
  }));
}
type Props = CollectionEntry<"content">;

const {
  data: { title, description, pubDate },
} = Astro.props;
const { Content } = await render(Astro.props);
---

<Layout title={title} description={description}>
  <article>
    <h1>{title}</h1>
    <h2>{description}</h2>
    <FormattedDate date={pubDate} />
    <hr />
    <Content />
  </article>
</Layout>
<style>
  article {
    h1 {
      text-align: left;
      font-size: 1.8rem;
      font-weight: bold;
      line-height: 1;
      margin-top: 0.5rem;
      margin-bottom: 0.1rem;
    }

    time {
      font-size: 1.1rem;
      text-align: left;
      color: light-dark(
        hsl(from var(--color-text) h s 40%),
        hsl(from var(--color-text) h s 80%)
      );
    }

    hr {
      margin: 0.5rem 0;
      border-color: hsl(var(--color-text));
    }

    h2 {
      font-size: 1.1rem;
      font-weight: 500;
    }

    h3 {
      font-size: 1.25rem;
      font-weight: 700;
      margin-top: 0.5rem;
      margin-bottom: 0.1rem;
    }

    p {
      font-size: 1.1rem;
      padding-bottom: 1rem;
    }

    p,
    li {
      font-size: 1.1rem;
      code {
        color: var(--color-code-fg) !important;
        background: var(--color-code-bg) !important;
        word-wrap: break-word;
        box-decoration-break: clone;
        padding: 2px 4px;
        border-radius: 0.2rem;
        font-weight: 400;
        font-size: 0.8rem;
      }
    }

    blockquote {
      font-size: 1.2rem;
      font-weight: 600;
      background: var(--color-highlight-bg);
      padding: 0.4rem;
      margin: 16px 0px;

      p {
        padding: 0;
      }
    }
  }
</style>